<template>
  <div class="mywallet">
    <div class="walletTop">
      <ul>
        <li :class="liid==1?'actli':''" @click="handli(1)">
          <div class="balance">钱包余额：{{balance.userAmount}}元</div>
          <div class="libut">
            <el-button
              v-for="item in butlist"
              :key="item.id"
              :plain="tabid==item.id?false:true"
              type="primary"
              @click="handtab(item.id)"
            >{{item.label}}</el-button>
          </div>
          <div class="road">
            你有{{balance.reviewAmount}}元奖金在路上
            <el-button
              type="primary"
              size="mini"
              :plain="tabid==4?false:true"
              @click="handtab(4)"
            >查看</el-button>
          </div>
        </li>
        <li :class="liid==2?'actli':''" @click="handli(2)">
          <span>可用金币：</span>
          <span>{{goldtotal}}</span>
          <img
            @click="aboutgold"
            src="https://lg-hh967l0u-1256079679.cos.ap-shanghai.myqcloud.com/understand.png"
            alt
          >
        </li>
      </ul>
    </div>
    <div class="wallcont">
      <div class="wall" v-show="liid==1">
        <div class="liitem" v-show="tabid==1 || tabid==4">
          <div class="watle">
            <el-button
              v-for="item in butarr"
              :key="item.id"
              :plain="waid==item.id?false:true"
              type="primary"
              @click="handwalltab(item.id)"
            >{{item.label}}</el-button>
          </div>
          <el-table v-loading="loading" :data="balancedetails.list" style="width: 100%">
            <el-table-column v-if="tabid==4" align="center" label="用户昵称">
              <template slot-scope="scope">{{scope.row.user ? scope.row.user.nickName : '享七用户'}}</template>
            </el-table-column>
            <el-table-column v-if="tabid==4" align="center" label="用户头像">
              <template slot-scope="scope">
                <img
                  class="conlimg"
                  :src="scope.row.user?scope.row.user.iconUrl:'./../../../../static/images/morentu.png'"
                  alt
                >
              </template>
            </el-table-column>
            <el-table-column align="center" label="金额">
              <template slot-scope="scope">
                <span>
                  <span v-show="tabid==1">{{scope.row.operateType | filteroperateType}}</span>
                  {{scope.row.operateAmount | filtersAmount}}
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="说明">
              <template slot-scope="scope">
                <span>
                  {{scope.row.remark}}
                  <el-tag v-show="scope.row.operateType==1">已完成</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="时间"></el-table-column>
          </el-table>
          <span class="pagin">
            <el-pagination
              v-show="balancedetails.total>10"
              layout="prev, pager, next"
              :total="balancedetails.total"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </span>
        </div>
        <div class="liitem" v-show="tabid==2">
          <div class="msg">
            {{withdrawMsg}}
            <div class="loan">享七网络科技有限公司</div>
          </div>
        </div>
        <div class="liitem" v-show="tabid==3">
          <div class="bank" v-show="balance.accountName && !isedit">
            <span>{{balance.cardBankname}}</span>
            <span>{{balance.accountName | filtersaccount}}</span>
            <span @click="handedit">编辑</span>
          </div>
          <div v-show="isedit">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="持卡人" prop="accountCardholder">
                <el-input v-model="ruleForm.accountCardholder"></el-input>
              </el-form-item>
              <el-form-item label="卡号" prop="accountName">
                <el-input type="accountName" v-model.number="ruleForm.accountName"></el-input>
              </el-form-item>
              <el-form-item label="银行名称" prop="cardBankname">
                <el-input v-model="ruleForm.cardBankname"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="wall" v-show="liid==2">
        <el-table v-loading="loading" :data="gold.list" style="width: 100%">
          <el-table-column align="center" label="金额">
            <template slot-scope="scope">
              <span>
                <span>{{scope.row.operateType | filteroperateType}}</span>
                {{scope.row.operateGold | filtersAmount}}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="说明">
            <template slot-scope="scope">
              <span>
                {{scope.row.remark}}
                <el-tag v-show="scope.row.operateType==1">已完成</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="时间"></el-table-column>
        </el-table>
        <span class="pagin">
          <el-pagination
            v-show="gold.total>10"
            layout="prev, pager, next"
            :total="gold.total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </span>
      </div>
    </div>
    <el-dialog title="金币说明" :visible.sync="dialogTableVisible">
      <ul class="dialul">
        <li v-for="(item,index) in golddesc" :key="item.id">
          <div class="rutitle">{{index+1}}、{{item.label}}</div>
          <div class="rucont">
            <ul>
              <li v-for="(items,index) in item.desc" :key="index">{{items.rule}}</li>
            </ul>
          </div>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: " mywallet",
  data() {
    return {
      page: 2,
      waid: 0,
      goldtotal: 0,
      liid: 1,
      tabid: 1,
      wapage: 1,
      operate: "",
      withdrawMsg:
        "尊敬的用户：由于系统升级中，提现功能于2019年3月1日正式开放，开放后方可自由提现，如您有任何问题，请于2019年2月12日后拨打客服电话027-59728176进行咨询。如给您带来不便，敬请谅解。感谢您对享7购的支持!",
      loading: false,
      isedit: false,
      dialogTableVisible: false,
      gold: {},
      ruleForm: {
        cardBankname: "",
        accountName: "",
        accountCardholder: "",
        accountType: 3
      },
      rules: {
        accountCardholder: [
          { required: true, message: "请输入持卡人姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        accountName: [
          { required: true, message: "请输入银行卡卡号", trigger: "blur" },
          {
            type: "number",
            message: "银行卡卡号必须为数字值",
            trigger: "blur"
          }
        ],
        cardBankname: [
          {
            required: true,
            message: "请输入银行卡所属银行名称",
            trigger: "blur"
          },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ]
      },
      balance: {},
      balancedetails: {},
      walletlist: [],
      wall: [
        {
          id: 0,
          label: "全部"
        },
        {
          id: 2,
          label: "转入"
        },
        {
          id: 1,
          label: "转出"
        }
      ],
      road: [
        {
          id: 4,
          label: "已获取"
        },
        {
          id: 5,
          label: "在路上"
        },
        {
          id: 6,
          label: "已失败"
        }
      ],
      butarr: [],
      butlist: [
        {
          label: "明细",
          id: 1
        },
        {
          label: "提现",
          id: 2
        },
        {
          label: "银行卡",
          id: 3
        }
      ],
      golddesc: [
        {
          id: 1,
          label: "金币是什么？",
          desc: [
            {
              id: "1-1",
              rule:
                "金币是用户在享7购平台，通过砍价、购买等行为获得的奖励，目前仅限于在享7购平台使用。"
            }
          ]
        },
        {
          id: 2,
          label: "如何获得金币",
          desc: [
            {
              id: "2-1",
              rule: "a) 使用优惠劵；"
            },
            {
              id: "2-2",
              rule: "b) 发起砍价并成功购买；"
            },
            {
              id: "2-3",
              rule: "c) 帮好友砍价。"
            }
          ]
        },
        {
          id: 3,
          label: "如何使用金币",
          desc: [
            {
              id: "3-1",
              rule: "a）兑换实物商品邮费到付；"
            },
            {
              id: "3-2",
              rule:
                "b）兑换时请仔细核对收货信息，商品一经兑换，不支持收货信息修改，不支持退货、提现等;"
            },
            {
              id: "3-3",
              rule: "c）凡兑换的实物类奖品将在15个工作日内安排发货。"
            }
          ]
        }
      ]
    };
  },
  computed: {
    ...mapState(["token", "userId"])
  },
  filters: {
    filteroperateType(val) {
      if (val == 1) {
        return "-";
      } else {
        return "+";
      }
    },
    filtersaccount(val) {
      if (val) {
        return val.replace(/(\d{4})(?=\d)/g, "$1" + " ");
      }
    },
    filtersAmount(val) {
      return "¥ " + val;
    }
  },
  methods: {
    //初始化
    init() {
      this.butarr = this.wall;
      this.getUserAccount();
      this.getgoldtotal();
      this.Balancedetails();
      this.getgoldlist();
    },
    //校验表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.savebank();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //保存表单 编辑银行卡信息
    savebank() {
      let _value = "",
        _Url = "";
      for (var key in this.ruleForm) {
        _value += key + "=" + this.ruleForm[key] + "&";
      }
      _value = _value.substring(0, _value.length - 1);
      this.$axios({
        url: "/api/website/account/updateBank?" + _value,
        method: "post",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.$message.success("操作成功！");
          this.getUserAccount();
        }
      });
    },
    //切换钱包/余额
    handli(val) {
      this.liid = val;
      this.page = 1;
      if (this.liid == 1) {
        this.Balancedetails(this.waid);
      } else if (this.liid == 2) {
        this.getgoldlist();
      }
    },
    //切换钱包明细、提现、银行卡、查看
    handtab(val) {
      this.tabid = val;
      this.isedit = false;
      this.page = 1;
      this.balancedeta = {};
      if (val == 4) {
        this.waid = 4;
        this.butarr = this.road;
      } else if (val == 1) {
        this.waid = 0;
        this.butarr = this.wall;
      }
      this.Balancedetails(this.waid);
    },
    //切换全部、转入、转出  / 切换已获取、在路上、已失败
    handwalltab(val) {
      this.waid = val;
      this.page = 1;
    },
    //编辑银行卡
    handedit() {
      this.isedit = !this.isedit;
    },
    //获取钱包信息
    getUserAccount() {
      this.$axios({
        url: "/api/website/account/getUserAccount",
        method: "post",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.balance = res.data.data;
          if (res.data.data.accountName) {
            this.ruleForm.cardBankname = res.data.data.cardBankname;
            this.ruleForm.accountName = res.data.data.accountName * 1;
            this.ruleForm.accountCardholder = res.data.data.accountCardholder;
            this.isedit = false;
          } else {
            this.isedit = false;
          }
        }
      });
    },
    //翻页
    handleCurrentChange(val) {
      this.page = val;
      if (this.liid == 1) {
        this.Balancedetails(this.waid);
      } else if (this.liid == 2) {
        this.getgoldlist();
      }
    },
    //查询金币总数
    getgoldtotal() {
      this.$axios({
        url: "/api/website/account/approve/findGold?userId=" + this.userId,
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.goldtotal = res.data.data;
        }
      });
    },
    //获取钱包明细/在路上明细
    Balancedetails(val) {
      let _Url = "";
      if (this.tabid == 4) {
        _Url =
          "/api/website/account/listUserTrading?type=" +
          this.waid +
          "&rows=10&page=" +
          this.page;
      } else {
        if (val == 1 || val == 2) {
          _Url =
            "/api/website/account/listUserTrading?type=3&&operateType=" +
            val +
            "&rows=10&page=" +
            this.page;
        } else {
          _Url =
            "/api/website/account/listUserTrading?type=3&rows=10&page=" +
            this.page;
        }
      }
      this.loading = true;
      this.$axios({
        url: _Url,
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          this.balancedetails = res.data.data;
        }
      });
    },
    //获取金币数据
    getgoldlist() {
      this.loading = true;
      this.$axios({
        url:
          "/api/website/account/approve/listTrading?userId=" +
          this.userId +
          "&type=2&page=" +
          this.page +
          "&rows=10",
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          this.gold = res.data.data;
        }
      });
    },
    //关于金币
    aboutgold() {
      this.dialogTableVisible = !this.dialogTableVisible;
    }
  },
  created() {
    this.init();
  }
};
</script>
<style lang="less">
.mywallet {
  .walletTop {
    height: 210px;
    & > ul {
      .actli {
        background: #409eff;
      }
      li {
        float: left;
        width: 42%;
        padding: 3%;
        height: 120px;
        border: 1px solid #555;
        border-radius: 8px;
        background: #fff;
        text-align: center;
        cursor: pointer;
        .balance {
          font-size: 28px;
        }
        .libut {
          margin: 16px 0;
        }
      }
      li:nth-child(2) {
        font-size: 28px;
        line-height: 120px;
        img {
          width: 25px;
          height: 25px;
          position: relative;
          top: -20px;
        }
        span:nth-child(2) {
          color: #e6a23c;
        }
      }
    }
  }
  .wallcont {
    .watle {
      padding-bottom: 1%;
      border-bottom: 2px solid #666;
    }
    .liitem {
      .msg {
        font-size: 24px;
        text-indent: 48px;
        line-height: 32px;
        .loan {
          text-align: right;
          padding-top: 30px;
        }
      }
      .bank {
        width: 400px;
        height: 250px;
        border-radius: 20px;
        background: #ecda89;
        position: relative;
        span:nth-child(1) {
          position: relative;
          font-size: 26px;
          top: 40px;
          left: 20px;
        }
        span:nth-child(2) {
          position: relative;
          font-size: 26px;
          top: 120px;
          text-align: center;
          display: block;
        }
        span:nth-child(3) {
          position: relative;
          right: 30px;
          top: -33px;
          float: right;
          cursor: pointer;
          padding: 5px;
          border: 1px solid #fff;
          border-radius: 5px;
        }
      }
      .el-form {
        width: 500px;
      }
    }
    .conlimg {
      height: 60px;
      width: 60px;
      border-radius: 50%;
    }
  }
  .pagin {
    float: right;
  }
  .dialul {
    font-size: 20px;
    .rutitle {
      font-weight: 700;
      margin: 10px 0;
    }
    .rucont {
      li {
        text-indent: 30px;
        height: 28px;
        line-break: 28px;
      }
    }
  }
}
</style>
